﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jquery.aspx.cs" Inherits="CSharpLearningWeb.Jquery.Jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jNotify.jquery.min.js" type="text/javascript"></script>
    <link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="../Css/jNotify.jquery.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #progressBackgroundFilter
        {
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            overflow: hidden;
            padding: 0;
            margin: 0;
            background-color: #000;
            filter: alpha(opacity=50);
            opacity: 0.5;
            z-index: 1000;
        }

        #processMessage
        {
            position: fixed;
            top: 30%;
            left: 43%;
            padding: 8px;
            width: 14%;
            z-index: 1001;
            background-color: white;
            border-width: 2px;
            border-style: solid;
            border-color: #3D0217;
            text-align: center;
            text-transform: uppercase;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 11px;
            font-weight: normal;
            color: #3D0217;
            letter-spacing: 1px;
        }

        #AjaxIndicator
        {
            width: 240px;
            height: 80px;
            position: absolute;
            z-index: 99999;
            text-align: center;
            line-height: 7em;
            font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
            font-size: 95%;
            color: #777;
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#teste').addClass('ui-state-highlight');
            var processMessage = $("#processMessage");
            var progressBackgroundFilter = $("#progressBackgroundFilter");

            processMessage._hide();
            progressBackgroundFilter._hide();

            $("#progressbar").progressbar({
                value: 80
            });

            // Start ajax indicator
            $(document).ajaxStart(function () {
                $("#AjaxIndicator").fadeIn();
            });

            // Stop the ajax indicator
            $(document).ajaxStop(function () {
                $("#AjaxIndicator").fadeOut();
            });

            $.ajaxSetup({
                beforeSend: function () {
                    // show gif here, eg:
                    //$("#AjaxIndicator").fadeIn();
                    processMessage.fadeIn();
                    progressBackgroundFilter.fadeIn();
                },
                complete: function () {
                    // hide gif here, eg:
                    //$("#AjaxIndicator").fadeOut();
                    processMessage.fadeOut();
                    progressBackgroundFilter.fadeOut();
                }
            });

            $('#Button1').click(function () {
                jError('Sucesso.',
                {
                    autoHide: false, // added in v2.0
                    TimeShown: 3000,
                    HorizontalPosition: 'center',
                    clickOverlay: true
                }
                );
            });

            $("#btnLogin").click(function () {
                $.ajax({
                    type: "POST",
                    url: "Jquery.aspx/GetDate",
                    // If you want to pass parameter or data to server side function you can try line
                    //data: "{'args':'Hello World'}",
                    //else If you don't want to pass any value to server side function leave the data to blank line below
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        //Got the response from server and render to the client                        
                        //alert(msg.d);
                        $("#result").html(msg.d);
                    },
                    error: function () {
                        alert('erro');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="formularioContato" runat="server" method="post">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <input id="Button1" type="button" value="TestNote" />
                <input id="btnLogin" type="button" value="Login" />
                <div id="result">
                </div>
                <%-- <div id="AjaxIndicator" class="ui-widget-content ui-corner-all">
                    Indicator
                </div>--%>
                <div id="progressBackgroundFilter">
                </div>
                <div id="processMessage">
                    Por Favor Aguarde...
                </div>
                <div id="teste" style="padding: 0 .7em;">
                    <p>
                        <span class="ui-icon ui-icon-check" style="float: left; margin-right: .3em;"></span>
                        <strong>Alert:</strong> Sample style.
                    </p>
                </div>
                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
                    <p>
                        <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                        <strong>Alert:</strong> Sample ui-state-error style.
                    </p>
                </div>

            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
